import React, { Component } from 'react';
import { Affix, Layout, Menu } from 'antd';
import { Route, Routes } from 'react-router-dom';
import { Link } from "react-router-dom";
import classNames from 'classnames';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined
} from '@ant-design/icons';

// 组件
import Analysis from './dashboard/Analysis';
import Monitor from './dashboard/Monitor';
import WorkPlace from './dashboard/WorkPlace';

import CategoryList from './category/CategoryList';
import VideoList from './video/VideoList';

import Play from './play/Play'
// import MenuItem from 'antd/lib/menu/MenuItem';

const { Header, Content, Sider } = Layout;
const { SubMenu, Item } = Menu;

/**
 * 左侧菜单底部按钮
 * @param {*} props 
 * @returns 
 */
const ToggleFold = (props) => {
    return (
        <>
            <Menu className="toggle-button">
                <Item key="toggle" onClick={() => props.onClick(!props.collapsed)}> {props.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} </Item>
            </Menu>
        </>
    )
}


class Home extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {


    }

    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(collapsed)
        this.setState({ collapsed });
    };

    render() {
        const { collapsed } = this.state;
        return (
            <>
                <Layout className="layout-container" style={{ minHeight: '100vh' }}>
                    <Affix>
                        <Header className="layout-header">
                            <div className="logo" />
                        </Header>
                    </Affix>
                    <Layout className="layout-content" style={{ marginLeft: 0 }}>
                        <Sider
                            className="site-layout--sider"
                            trigger={null}
                            breakpoint="lg"
                            collapsible
                            theme="light"
                            collapsed={collapsed}
                            onCollapse={this.onCollapse}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['10']}
                                defaultOpenKeys={['sub1']}
                                style={{ borderRight: 0 }}
                                className="sider-menu"
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="Dashboard">
                                    <Menu.Item key="10">
                                        <Link to="/dashboard/analysis">分析页</Link>
                                    </Menu.Item>
                                    <Menu.Item key="11">
                                        <Link to="/dashboard/monitor">监控页</Link>
                                    </Menu.Item>
                                    <Menu.Item key="12">
                                        <Link to="/dashboard/workplace">工作台</Link>
                                    </Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="分类管理">
                                    <Menu.Item key="20">
                                        <Link to="/category/index">分类列表</Link>
                                    </Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="视频管理">
                                    <Menu.Item key="30">
                                        <Link to="/video/index">视频列表</Link>
                                    </Menu.Item>
                                </SubMenu>
                            </Menu>
                            <ToggleFold collapsed={collapsed} onClick={this.onCollapse} />
                        </Sider>
                        <Layout className={classNames({ "sider-toggle": !collapsed, "site-layout": true })} >
                            <Content className="site-layout--content">
                                {/* 路由组件 */}
                                <Routes>
                                    {/* dashboard */}
                                    <Route path="dashboard">
                                        <Route path="analysis" element={<Analysis />}>
                                        </Route>
                                        <Route path="monitor" element={<Monitor />}>
                                        </Route>
                                        <Route path="workplace" element={<WorkPlace />}>
                                        </Route>
                                    </Route>
                                    {/* 分类路由 */}
                                    <Route path="category">
                                        <Route path="index" element={<CategoryList />}>
                                        </Route>
                                    </Route>
                                    {/* 视频管理 */}
                                    <Route path="video">
                                        <Route path="index" element={<VideoList />}>
                                        </Route>
                                        <Route path="play" element={<Play />}>
                                        </Route>
                                    </Route>
                                </Routes>
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </>
        )
    }
}


export default Home;